<!-- 地图组件 - 用于显示设备分布图 -->
<template>
  <div class="centermap">
    <!-- 地图标题区域 -->
    <div class="maptitle">
      <div class="zuo"></div>
      <span class="titletext">{{ maptitle }}</span>
      <div class="you"></div>
    </div>
    <!-- 地图容器 -->
    <div class="mapwrap">
      <!-- 北台板材切换按钮组 - 位于左上角 -->
      <div class="tab-group">
        <div class="tab-btn" :class="{ active: currentTab === 'beitai' }" @click="switchTab('beitai')">
          北台
        </div>
        <div class="tab-btn" :class="{ active: currentTab === 'bancai' }" @click="switchTab('bancai')">
          板材
        </div>
      </div>

      <!-- 返回全国按钮 - 当不在全国视图时显示 -->
      <div class="quanguo" @click="getData('china')" v-if="code !== 'china'">
        中国
      </div>

      <!-- ECharts地图组件 -->
      <Echart id="CenterMap" :options="options" ref="CenterMap" />
    </div>
  </div>
</template>

<script>
// 导入行政区划代码数据
import xzqCode from "../../utils/map/xzqCode";
// 导入API请求方法
import { currentGET } from "api/modules";
// 导入ECharts库
import * as echarts from "echarts";
// 导入无base URL的GET请求方法
import { GETNOBASE } from "api";

export default {
  data() {
    return {
      maptitle: "设备分布图", // 地图标题
      options: {}, // ECharts配置选项
      code: "china", // 当前地图代码，china代表中国，其他为行政编码
      echartBindClick: false, // 是否已绑定点击事件标志
      isSouthChinaSea: false, // 是否要展示南海群岛，修改此值请刷新页面
      currentTab: "beitai", // 当前选中的tab，默认选中北台
    };
  },

  created() {
    // 组件创建时的生命周期钩子
  },

  mounted() {
    // 组件挂载后获取中国地图数据
    // console.log(xzqCode);
    // 初始化地图标题
    this.maptitle = this.currentTab === 'beitai' ? '北台在途车辆' : '板材在途车辆';
    this.getData("china");
  },

  methods: {
    /**
     * 获取地图数据
     * @param {string} code - 地区代码，china表示全国，其他为行政区编码
     * @param {string} tab - tab类型，'beitai'或'bancai'，默认为当前选中的tab
     */
    getData(code, tab = this.currentTab) {
      // 调用API获取设备分布数据，传递tab参数
      currentGET("big8", { regionCode: code, tab: tab }).then((res) => {
        console.log("设备分布", res);
        if (res.success) {
          // 成功获取数据后，获取对应的GeoJSON并初始化地图
          this.getGeojson(res.data.regionCode, res.data.dataList);
          this.mapclick();
        } else {
          // 请求失败显示警告信息
          this.$Message.warning(res.msg);
        }
      });
    },

    /**
     * 获取GeoJSON地图数据并初始化地图
     * @param {string} name - 地图名称，china表示中国，其他省份为行政区编码
     * @param {Array} mydata - 接口返回的设备数据列表
     */
    async getGeojson(name, mydata) {
      this.code = name;

      // 如果要展示南海群岛并且展示的是中国的话
      let geoname = name;
      if (this.isSouthChinaSea && name == "china") {
        geoname = "chinaNanhai";
      }

      // 检查是否已经注册了地图，如果有就不用再注册
      let mapjson = echarts.getMap(name);
      if (mapjson) {
        mapjson = mapjson.geoJSON;
      } else {
        // 从本地文件获取GeoJSON数据
        mapjson = await GETNOBASE(`./map-geojson/${geoname}.json`).then((res) => {
          return res;
        });
        // 注册地图到ECharts
        echarts.registerMap(name, mapjson);
      }

      // 获取城市中心点坐标
      let cityCenter = {};
      let arr = mapjson.features;
      // 根据GeoJSON获取省份中心点
      arr.map((item) => {
        cityCenter[item.properties.name] =
          item.properties.centroid || item.properties.center;
      });

      // 处理数据，将设备数据与中心点坐标结合
      let newData = [];
      mydata.map((item) => {
        if (cityCenter[item.name]) {
          newData.push({
            name: item.name,
            value: cityCenter[item.name].concat(item.value),
          });
        }
      });

      // 初始化地图
      this.init(name, mydata, newData);
    },

    /**
     * 初始化ECharts地图配置
     * @param {string} name - 地图名称
     * @param {Array} data - 原始数据
     * @param {Array} data2 - 处理后的散点数据
     */
    init(name, data, data2) {
      console.log(data2,"数据0000000000");
      let top = 45; // 地图顶部偏移
      let zoom = 1.2; // 地图缩放比例

      // 生成迁徙线数据 - 基于涟漪点的经纬度
      let linesData = [];
      if (data2 && data2.length > 1) {
        // 创建涟漪点之间的连接线
        for (let i = 0; i < data2.length - 1; i++) {
          const currentPoint = data2[i];
          const nextPoint = data2[i + 1];
          
          // 确保两个点都有有效的坐标
          if (currentPoint.value && nextPoint.value && 
              currentPoint.value.length >= 2 && nextPoint.value.length >= 2) {
            linesData.push({
              coords: [
                [currentPoint.value[0], currentPoint.value[1]], // 起点坐标
                [nextPoint.value[0], nextPoint.value[1]]       // 终点坐标
              ],
              fromName: currentPoint.name, // 起点名称
              toName: nextPoint.name,      // 终点名称
              lineStyle: {
                normal: {
                  color: this.currentTab === 'beitai' ? '#0096f3' : '#34da62',
                  width: 1,
                  opacity: 0.6,
                  curveness: 0.2
                }
              }
            });
          }
        }
      }

      // ECharts配置选项
      let option = {
        backgroundColor: "rgba(0,0,0,0)", // 背景色透明
        tooltip: {
          show: false, // 不显示默认提示框
        },
        legend: {
          show: false, // 不显示图例
        },
        // // 视觉映射组件 - 用于颜色映射
        // visualMap: {
        //   left: 20,
        //   bottom: 20,
        //   pieces: [
        //     { gte: 1000, label: "1000个以上" }, // 不指定 max，表示 max 为无限大（Infinity）。
        //     { gte: 600, lte: 999, label: "600-999个" },
        //     { gte: 200, lte: 599, label: "200-599个" },
        //     { gte: 50, lte: 199, label: "49-199个" },
        //     { gte: 10, lte: 49, label: "10-49个" },
        //     { lte: 9, label: "1-9个" }, // 不指定 min，表示 min 为无限大（-Infinity）。
        //   ],
        //   inRange: {
        //     // 渐变颜色，从小到大
        //     color: [
        //       "#c3d7df",
        //       "#5cb3cc",
        //       "#8abcd1",
        //       "#66a9c9",
        //       "#2f90b9",
        //       "#1781b5",
        //     ],
        //   },
        //   textStyle: {
        //     color: "#fff", // 文字颜色
        //   },
        // },
        // 地理坐标系组件
        geo: {
          map: name, // 地图类型
          roam: false, // 禁用缩放和平移
          selectedMode: false, // 是否允许选中多个区域
          zoom: zoom, // 缩放比例
          top: top, // 顶部偏移
          // aspectScale: 0.78,
          show: false, // 不显示地理坐标系
        },
        // 系列列表
        series: [
          {
            name: "MAP",
            type: "map", // 地图类型
            map: name, // 地图名称
            // aspectScale: 0.78,
            data: data, // 地图数据
            // data: [1,100],
            selectedMode: false, // 是否允许选中多个区域
            zoom: zoom, // 缩放比例
            geoIndex: 1, // 地理坐标系索引
            top: top, // 顶部偏移
            // 提示框配置
            tooltip: {
              show: true,
              formatter: function (params) {
                if (params.data) {
                  return params.name + "：" + params.data["value"];
                } else {
                  return params.name;
                }
              },
              backgroundColor: "rgba(0,0,0,.6)",
              borderColor: "rgba(147, 235, 248, .8)",
              textStyle: {
                color: "#FFF",
              },
            },
            // 标签配置
            label: {
              show: false, // 不显示标签
              color: "#000",
              // position: [-10, 0],
              formatter: function (val) {
                // console.log(val)
                if (val.data !== undefined) {
                  return val.name.slice(0, 3); // 只显示前两个字符
                } else {
                  return "";
                }
              },
              rich: {},
            },
            // 高亮状态配置
            emphasis: {
              label: {
                show: false,
              },
              itemStyle: {
                areaColor: "#389BB7", // 高亮时的区域颜色
                borderWidth: 1,
              },
            },
            // 普通状态样式配置
            itemStyle: {
              borderColor: "rgba(147, 235, 248, .8)", // 边框颜色
              borderWidth: 1, // 边框宽度
              areaColor: {
                type: "radial", // 径向渐变
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
                  },
                ],
                globalCoord: false, // 缺为 false
              },
              shadowColor: "rgba(128, 217, 248, .3)", // 阴影颜色
              shadowOffsetX: -2, // 阴影X偏移
              shadowOffsetY: 2, // 阴影Y偏移
              shadowBlur: 10, // 阴影模糊度
            },
          },
          {
            data: data2, // 散点数据
            type: "effectScatter", // 涟漪散点图
            coordinateSystem: "geo", // 使用地理坐标系
            symbolSize: function (val) {
              return 4; // 固定散点大小
              // return val[2] / 50;
            },
            legendHoverLink: true,
            showEffectOn: "render", // 在渲染时显示特效
            rippleEffect: {
              // period: 4,
              scale: 6, // 涟漪缩放比例
              color: "rgba(255,255,255, 1)", // 涟漪颜色
              brushType: "fill", // 涟漪类型
            },
            // 散点提示框配置
            tooltip: {
              show: true,
              formatter: function (params) {
                if (params.data) {
                  return params.name + "：" + params.data["value"][2];
                } else {
                  return params.name;
                }
              },
              backgroundColor: "rgba(0,0,0,.6)",
              borderColor: "rgba(147, 235, 248, .8)",
              textStyle: {
                color: "#FFF",
              },
            },
            // 散点标签配置
            label: {
              formatter: (param) => {
                return param.name.slice(0, 2); // 只显示前两个字符
              },
              fontSize: 11,
              offset: [0, 2],
              position: "bottom",
              textBorderColor: "#fff", // 文字边框颜色
              textShadowColor: "#000", // 文字阴影颜色
              textShadowBlur: 10, // 文字阴影模糊度
              textBorderWidth: 0,
              color: "#FFF",
              show: true,
            },
            // colorBy: "data",
            // 散点样式配置
            itemStyle: {
              color: "rgba(255,255,255,1)", // 散点颜色
              borderColor: "rgba(2255,255,255,2)", // 边框颜色
              borderWidth: 4, // 边框宽度
              shadowColor: "#000", // 阴影颜色
              shadowBlur: 10, // 阴影模糊度
            },
          },
          {
            type: 'lines', //迁徙线
            zlevel: 2,
            effect: {
              show: true,
              period: 4, //箭头指向速度，值越小速度越快
              trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
              symbol: 'arrow', //箭头图标
              symbolSize: 5, //图标大小
            },
            lineStyle: {
              normal: {
                width: 1, //尾迹线条宽度
                opacity: 1, //尾迹线条透明度
                curveness: .3 //尾迹线条曲直度
              }
            },
            data: linesData, // 使用基于涟漪点生成的迁徙线数据
            // 迁徙线提示框配置
            tooltip: {
              show: true,
              formatter: function (params) {
                if (params.data && params.data.fromName && params.data.toName) {
                  return `${params.data.fromName} → ${params.data.toName}`;
                } else {
                  return params.name || '迁徙路线';
                }
              },
              backgroundColor: "rgba(0,0,0,.6)",
              borderColor: "rgba(147, 235, 248, .8)",
              textStyle: {
                color: "#FFF",
              },
            }
          }
        ],
        // 动画效果配置（已注释）
        // animationDuration: 1000,
        // animationEasing: 'linear',
        // animationDurationUpdate: 1000
      };
      this.options = option;
    },

    /**
     * 显示消息提示
     * @param {string} text - 提示文本
     */
    message(text) {
      this.$Message({
        text: text,
        type: "warning",
      });
    },

    /**
     * 绑定地图点击事件
     */
    mapclick() {
      if (this.echartBindClick) return; // 如果已经绑定过点击事件，直接返回

      // 单击切换到下级地图，当mapCode有值,说明可以切换到下级地图
      this.$refs.CenterMap.chart.on("click", (params) => {
        // console.log(params);
        // 根据点击的地区名称获取行政区划数据
        let xzqData = xzqCode[params.name];
        if (xzqData) {
          // 如果有下级地区，则切换到下级地图
          this.getData(xzqData.adcode);
        } else {
          // 如果没有下级地区，显示提示信息
          this.message("暂无下级地市!");
        }
      });
      this.echartBindClick = true; // 标记已绑定点击事件
    },

    /**
     * 切换北台/板材tab
     * @param {string} tab - tab类型，'beitai'或'bancai'
     */
    switchTab(tab) {
      this.currentTab = tab;
      // 根据选中的tab更新地图标题
      this.maptitle = tab === 'beitai' ? '北台设备分布图' : '板材设备分布图';
      // 重新获取当前地图数据
      this.getData(this.code, this.currentTab);
    },
  },
};
</script>

<style lang="scss" scoped>
/* 地图组件样式 */
.centermap {
  margin-bottom: 30px; // 底部外边距

  /* 地图标题样式 */
  .maptitle {
    height: 60px; // 标题高度
    display: flex; // 弹性布局
    justify-content: center; // 水平居中
    padding-top: 10px; // 顶部内边距
    box-sizing: border-box; // 盒模型
    position: relative; // 相对定位，为绝对定位的子元素提供参考

    /* 标题文字样式 */
    .titletext {
      font-size: 28px; // 字体大小
      font-weight: 900; // 字体粗细
      letter-spacing: 6px; // 字符间距
      background: linear-gradient(92deg,
          #0072ff 0%,
          #00eaff 48.8525390625%,
          #01aaff 100%); // 渐变背景
      -webkit-background-clip: text; // 背景裁剪为文字
      background-clip: text;
      -webkit-text-fill-color: transparent; // 文字颜色透明
      margin: 0 10px; // 左右外边距
    }

    /* 左右装饰元素样式 */
    .zuo,
    .you {
      background-size: 100% 100%; // 背景图片尺寸
      width: 29px; // 宽度
      height: 20px; // 高度
      margin-top: 8px; // 顶部外边距
    }

    /* 左装饰元素 */
    .zuo {
      background: url("../../assets/img/xiezuo.png") no-repeat; // 左装饰背景图
    }

    /* 右装饰元素 */
    .you {
      background: url("../../assets/img/xieyou.png") no-repeat; // 右装饰背景图
    }

    /* 标题右侧切换按钮组样式 */
    .title-tab-group {
      position: absolute; // 绝对定位
      right: 20px; // 右偏移
      top: 50%; // 垂直居中
      transform: translateY(-50%); // 垂直居中调整
      display: flex; // 弹性布局
      gap: 8px; // 按钮间距
      z-index: 10; // 层级

      .title-tab-btn {
        width: 60px; // 按钮宽度
        height: 24px; // 按钮高度
        border: 1px solid #00eded; // 边框
        border-radius: 6px; // 圆角
        color: #00f7f6; // 文字颜色
        text-align: center; // 文字居中
        line-height: 22px; // 行高
        letter-spacing: 2px; // 字符间距
        cursor: pointer; // 鼠标指针
        font-size: 12px; // 字体大小
        transition: all 0.3s ease; // 过渡动画
        box-shadow: 0 1px 3px rgba(0, 237, 237, 0.3); // 阴影效果

        &:hover {
          background-color: rgba(0, 237, 237, 0.1); // 悬停效果
        }

        &.active {
          background-color: #03c2c2; // 激活状态背景色
          color: #fff; // 激活状态文字颜色
          box-shadow: 0 2px 6px rgba(3, 194, 194, 0.4); // 激活状态阴影
        }
      }
    }
  }

  /* 地图容器样式 */
  .mapwrap {
    height: 548px; // 容器高度
    width: 100%; // 容器宽度
    // padding: 0 0 10px 0;
    box-sizing: border-box; // 盒模型
    position: relative; // 相对定位

    /* 北台板材切换按钮组样式 */
    .tab-group {
      position: absolute;
      left: 0px;
      top: 0px;
      display: flex;
      gap: 10px;
      z-index: 10;

      .tab-btn {
        width: 80px;
        height: 28px;
        border: 1px solid #00eded;
        border-radius: 10px;
        color: #00f7f6;
        text-align: center;
        line-height: 26px;
        letter-spacing: 6px;
        cursor: pointer;
        box-shadow: 0 2px 4px rgba(0, 237, 237, 0.5),
          0 0 6px rgba(0, 237, 237, 0.4);

        &.active {
          background-color: #03c2c2;
          color: #fff;
        }
      }
    }

    /* 返回全国按钮样式 */
    .quanguo {
      position: absolute; // 绝对定位
      right: 20px; // 右偏移
      top: -46px; // 顶部偏移
      width: 80px; // 按钮宽度
      height: 28px; // 按钮高度
      border: 1px solid #00eded; // 边框
      border-radius: 10px; // 圆角
      color: #00f7f6; // 文字颜色
      text-align: center; // 文字居中
      line-height: 26px; // 行高
      letter-spacing: 6px; // 字符间距
      cursor: pointer; // 鼠标指针
      box-shadow: 0 2px 4px rgba(0, 237, 237, 0.5),
        0 0 6px rgba(0, 237, 237, 0.4); // 阴影效果
    }
  }
}
</style>
